<template>
  <div class="main">
    <div class="header">
      <div>
        <el-input v-model="searcheVal" placeholder="请输入教师关键字搜索" size="mini" style="width:218px;margin-right:8px"></el-input>
        <el-button style="border:1px solid blue;background:green;color:#fff" @click="searchFun" size="mini">搜索</el-button>
      </div>
    </div>
    <div class="body">
      <el-table
    :data="tableData"
    style="width: 100%"
    height="498">
    <el-table-column
      fixed
      prop="sUser"
      label="学校"
      width="188">
    </el-table-column>
    <el-table-column
      prop="tUser"
      label="教师"
      width="188">
    </el-table-column>
    <el-table-column
      prop="comment"
      label="评论"
      width="388">
    </el-table-column>
    <el-table-column
      label="评分"
      width="188">
      <template  slot-scope="scope">
        <el-rate
         :value="scope.row.level"
         disabled
         show-score
         text-color="#ff9900"
         score-template="{value}">
         </el-rate>
      </template>
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-button @click="deleteCommentInfo(scope.row)" type="text" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <div class="footer" style="position:fixed;right:0;bottom:0">
      <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getCommentInfo, deleteComment } from '../api/info'
export default {
  data () {
    return {
      searcheVal: '',
      total: 0,
      currentPage: 1,
      tableData: []
    }
  },
  methods: {
    // 搜索
    searchFun () {
      this.currentPage = 1
      this.getComment()
    },
    // 跳转页面
    handleCurrentChange (val) {
      this.currentPage = val
      this.getComment()
    },
    // 删除评价
    deleteCommentInfo (row) {
      deleteComment(row).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success('删除成功')
          this.getComment()
        }
      })
    },
    // 获取评价
    getComment () {
      getCommentInfo({ serchVal: this.searcheVal, currentPage: this.currentPage }).then(({ data }) => {
        // console.log(data)
        this.tableData = data.arrVal
        this.total = data.total
      })
    }
  },
  mounted () {
    this.getComment()
  }
}
</script>
<style scoped lang="less">
.main{
  .header{
    height: 32px;
    // background: red;
    /deep/ .el-input__inner{
      background:transparent;
      border:1px solid blue;
    }
  }
}

</style>
